import { defineComponent, ref } from "vue";
import Table from "../Table/Table";
import styles from "./TablePage.module.less";
export default defineComponent({
  props: {
    config: {
      type: Object,
      required: true,
    },
  },
  setup(props, { expose }) {
    const tableRef = ref(null as any);
    // 自定义顶部
    const Header = () => (
      <div class={styles.header}>
        {
          props.config?.header?.()
        }
      </div>
    )
    // 自定义左边部分
    const Before = () => (
      <div class={styles.before}>
        {
          props.config?.before?.()
        }
      </div>
    )
    // 自定义右边部分
    const After = () => (
      <div class={styles.after}>
        {
          props.config?.after?.()
        }
      </div>
    )
    // 自定义底部
    const Footer = () => (
      <div class={styles.footer}>
        {
          props.config?.footer?.()
        }
      </div>
    )
    // 核心部分
    const Main = () => (
      <div class={styles.main}>
        <div class={styles.title}>{props.config.table.title}</div>
        <Table tableConfig={props.config.table} ref={tableRef} />
      </div>
    )
    // 中间部分
    const Section = () => (
      <div class={styles.section}>
        {props.config.before && <Before />}
        <Main />
        {props.config.after && <After />}
      </div>
    )
    const getDataSource = () => {
      return tableRef.value.getDataSource();
    }
    const getPopup = (key: string) => {
      return tableRef.value.getPopup(key);
    }
    const reload = () => {
      tableRef.value.reload();
    }
    expose({
      getDataSource,
      getPopup,
      reload,
    })
    return () => (
      <div class={styles.page}>
        <div class={styles["wall-paper"]}>
          {props.config.header && <Header />}
          <Section />
          {props.config.footer && <Footer />}
        </div>
      </div>
    )
  }
})